import {defineConfig, loadEnv} from 'vite'
import vue from '@vitejs/plugin-vue'
import topLevelAwait from 'vite-plugin-top-level-await'
import path from 'path' // 需安装此模块 npm install --save-dev @types/node
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  console.log('command', command)
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const {VITE_APP_BASE_API} = loadEnv(mode, process.cwd())
  return {
    base: './',
    plugins: [
      vue(),
      // 解决顶级await
      topLevelAwait({
        promiseExportName: '__tla',
        promiseImportName: i => `__tla_${i}`
      }),
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]'
      })
    ],
    build: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia']
        }
      },
      assetsDir: 'assets', // 指定生成静态资源的存放路径
      // minify: 'terser', // 混淆器，terser构建后文件体积更小
      cssCodeSplit: true // 拆分css
    },
    server: {
      port: 1010,
      // host: '0.0.0.0',
      host: '127.0.0.1',
      proxy:{
        '/api': {
          target: VITE_APP_BASE_API,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      alias: {  // 这里就是需要配置resolve里的别名
        "@": path.join(__dirname, "./src"), // path记得引入
        // 'vue': 'vue/dist/vue.esm-bundler.js' // 定义vue的别名，如果使用其他的插件，可能会用到别名
      },
    }
  }
})
